<template>
  <div>
    <!-- 标题栏 -->
    <van-nav-bar
      title="不凡"
      left-text="返回"
      left-arrow
      fixed
      @click-left="onClickLeft"
    />
    <!-- 导航栏 -->
    <van-tabs class="tabsList"  @click="tabsListitem">
      <van-tab
        v-for="(item,index) in navDataList"
        :key="index"
        :title="item.name"  
      >
        <div class="content" >
          <div class="content-t" >
              <p class="content-t-t">{{currentNav.name}}</p>
              <p class="content-t-b">{{currentNav.front_desc}}</p>
          </div>
          <div class="content-t-bb">
              <div class="content-b" v-for="item in DataList" :key="item.id" @click="godetailactions(item.id)" >
              <img :src="item.list_pic_url" alt="">
              <p class="content-b-t">{{item.name}}</p>
              <p class="content-b-b">￥{{item.retail_price}}</p>
          </div>
          </div>
          
        </div>
      </van-tab>
    </van-tabs>
    <!-- 下面的内容 -->
  </div>
</template>
<script>
import { categoryNav, goodsList } from "@/api/category/categorylist.js";
export default {
  data() {
    return {
      //获取分类商品列表参数
    //   categoryId: 1005000,
      // 获取导航数据参数
      id: '',
      navDataList: [],
      DataList: [],
      currentNav:[],
    };
  },
  methods: {
    getList() {
      categoryNav({
        id:this.id,
      }).then((res) => {
        console.log(res);
        this.navDataList = res.navData;
        console.log(this.navDataList)
      });

      goodsList({
        categoryId:this.id,
      }).then((res) => {
        // console.log(res);
        this.currentNav=res.currentNav
        console.log(this.currentNav)
        this.DataList = res.data;
        console.log(this.DataList)
      });
    },
    onClickLeft(){
        this.$router.go(-1)
    },
    //获取标题栏下标
    tabsListitem(index){
        console.log(index)
        console.log(this.navDataList[index].id)
        this.id=this.navDataList[index].id;
        console.log(this.id)
        this.getList();
    },
    //跳转到商品详情列表
    godetailactions(key){
      var Id=key;
      localStorage.setItem('Id',Id)
      this.$router.push({name:'detailactions'})
    }
  },
  created() {
    this.id=localStorage.getItem('keyId')
    console.log(this.id)
     this.getList();
  },
};
</script>
<style lang="scss" scoped>
    .tabsList{
        margin-top: 48px;
        .content{
            width: 100%;
            .content-t{
                width: 100%;
                height: 80px;
                line-height: 100px;
                text-align: center;
                background-color: #fff;
                .content-t-t{
                    font-size:14px;
                    height: 40px;
                    width: 100%;
                    line-height: 50px;
                }
                .content-t-b{
                    font-size: 12px;
                    color: #999;
                    width: 100%;
                    height: 40px;
                    line-height:10px;
                }
            }
            .content-t-bb{
                margin-top: 5px;
                width: 100%;
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                .content-b{
                 background-color: #fff;   
                width:49%;
                margin-bottom: 10px;
                img{
                    width: 100%;
                    height: auto;
                }
                .content-b-t{
                    width: 100%;
                    height: 16px;
                    text-align: center;
                    line-height:16px;
                }
                .content-b-b{
                    width: 100%;
                    height: 16px;
                    text-align: center;
                    line-height:16px;
                    color: #eb2323;
                }
            }
            }
            
        }
    }
</style>
